/**
 * @author zhangqiang
 * @date   17/7/20
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Toast, Modal} from 'antd-mobile'
import {getOrdreDetail} from '../../actions/orderDetailAction'
import {OrderList, SelectPayMent} from '../../components/payment'
import style from './index.scss'
import common from '../../../../../../js/utils/common'
const alert = Modal.alert;

class OrderDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {}
		this.orderId = this.props.params.orderId
		this.chargeId = this.props.params.chargeId
	}

	componentWillMount() {
	}

	componentDidMount() {
		common.setViewTitle('订单详情');
		let postData = {
			orderId: this.orderId,   
			chargeOrderId: this.chargeId
		}
		this.props.dispatch(getOrdreDetail(postData))
	}

	toUrl(url) {
		this.context.router.replace(url);
	}

	render() {
		let data = this.props.orderDetail;
		let payTime = common.format(data.payTime),
			completeTime = common.format(data.completeTime),
			completeTimeIsShow = data.completeTime?true:false,
			completeText = data.orderStatus == 4?'关闭时间':data.orderStatus == 8?'完成时间':'',
			img = data.orderStatus == 2 || data.orderStatus == 1?'icon-success.png':
			data.orderStatus == 3||data.orderStatus == 4?'icon-warning.png':
			data.orderStatus == 8?'icon-success.png':
			'';

		return (
			<div className={style.orderDetail}>
				<div className={style.payStatus}>
					<img className={style.img} src={`./images/${img}`} alt=""/>
					<div className={style.title}>{data.statusName}</div>
					<div className={style.message}>{this.orderId}</div>
					<div className={style.message}>{data.statusDesc}</div>
				</div>
				{
					data.orderViolationList.map((item,index) => {
						let newLoation = "",
							location = item.violationLocation,
							locationName = item.locaitonName;
                        if (locationName == "") {
                            if (location.length > 5)
                                newLoation = location.substring(0, 5) + "...";
                            else {
                                newLoation = location;
							}
                        }
                        else {
							newLoation = locationName + "违章";
						}
						return <div className={style.orderList} key={index}>
							<div className={style.title}>{item.carNumber} {newLoation.replace(null,'')}</div>
							<div className={style.price}>
								<span>
									罚款本金¥{item.fineAmount}，
									办理服务费¥{
										item.cooperPoundge !=null && item.cooperPoundge !=0?item.cooperPoundge:
											item.pounDage
										}
								</span>
								<span>
									{
										common.format(item.violationTime,'yyyy-MM-dd')
									}
								</span>
							</div>
							<div className={style.explain}>
								{
									item.degree> 0 && item.other> 0?`根据当地交管所的规定，本次处理需要扣${item.degree}分。`:
									item.degree> 0 && item.other== 0?'因此地区当前违章类型不执行扣分政策，本次办理不扣分':
									item.canProcess== 1 && item.degree== 0?'':
									item.canProcessMsg !=null?`${item.canProcessMsg}`:''
								}
							</div>
						</div>
					})
				}
				<div className={style.payDetail}>
					<div className={style.payMent}>
						<span>订单费用</span>
						<span>¥{data.payAmount/100}</span>
					</div>
					<div className={style.detailMsg}>
						<div className={style.msg}>
							<span>订单编号</span> 
							<span>{this.orderId}</span> 
						</div>
						<div className={style.msg}>
							<span>支付方式</span> 
							<span>{
								data.payType == 2?'支付宝支付':'微信支付'
							}</span> 
						</div>
						<div className={style.msg} style={!data.payNo?{display:'none'}:{}}>
							<span>支付交易号</span> 
							<span>{data.payNo}</span> 
						</div>
						<div className={style.msg}>
							<span>支付时间</span> 
							<span>{payTime}</span> 
						</div>
						<div className={style.msg} style={!completeTimeIsShow?{display: 'none'}:{}}>
							<span>{completeText}</span> 
							<span>{completeTime}</span> 
						</div>
					</div>
				</div>
			</div>
		)
    }
}

//使用context
OrderDetail.contextTypes = {
    router: React.PropTypes.object.isRequired
};

OrderDetail.defaultProps = {
	orderDetail: {
		orderViolationList: []
	}
};

function mapStateToProps(state) {
    return Object.assign({}, state.orderDetailInfo);
}

export default connect(mapStateToProps)(OrderDetail);
